<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        :showBack="false"
      ></pageHeaderNew>
    </template>
    <a-tabs lazy-load default-active-key="1" v-model:active-key="currTab">
      <a-tab-pane key="1" title="组织设置">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[0]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="职位体系">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[1]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
      <!-- <a-tab-pane key="3" title="控编管理">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[2]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane> -->
    </a-tabs>
  </ContentCard>
</template>

<script lang="ts" setup>
import useExamineTabsStore from '@/store/modules/base/examineTabs/index';
interface str {
  name: string;
  description: string;
  icon: string;
  path: string;
}
const router = useRouter();
const title = '基础设置';

const breadCrumb: string[] = ['组织', '基础设置'];
const examineTabsStore = useExamineTabsStore();
const currTab = computed({
  get: () => examineTabsStore.tabsValue['organization'],
  set: (val: string) => {
    examineTabsStore.setTabs('organization', val);
  }
});
const setting = reactive<str[][]>([
  [
    {
      name: '组织类型',
      description: `说明：用户可以根据实际进行设置，如集团总部、分公司、子公司、职能部门、项目公司、事业部、办事处、门店等类型`,
      icon: 'icon-settings',
      path: 'OrganizationalType'
    },
    {
      name: '组织信息模板库',
      description: `说明：总部公司、区域公司、地区公司、项目公司、子公司、分公司办事处、事业部、职部门、项目部`,
      icon: 'icon-settings',
      path: 'OrganizationTemplate'
    },
    {
      name: '法律实体类型',
      description: `说明：法律实体主要是用于员工劳动合同签订是用人单位主体业务场景`,
      icon: 'icon-settings',
      path: 'LegalEntityType'
    },
    {
      name: '工作地点类型',
      description: `说明：工作地点主要是用于确定员工考勤打卡地点的业务场景`,
      icon: 'icon-settings',
      path: 'WordPlace'
    }
    // {
    //   name: '导入花名册设置',
    //   description: `说明：代码、名称、使命、核心职能、职能详细描述、部门编制、岗位设置、最高管理岗位、地点、联系电话`,
    //   icon: 'icon-settings',
    //   path: 'EditRoster'
    // }
  ],
  [
    {
      name: '职位类别',
      description: `说明：管理类 (M) 、专业技术类(T) 、市场营销类 (S)、产品设计类 (D)、职能管理类(P)、操作类 (0)`,
      icon: 'icon-settings',
      path: 'PositionSort'
    },
    {
      name: '职位说明书模板库',
      description: `说明：代码，名称，职位类别职位级别、是否为关键岗位、所属部门、直属上级、岗位编制主要职责，任职资格条件、职业发展通道，工作环境与资源、关键考核指标`,
      icon: 'icon-settings',
      path: 'PositionTemplate'
    },
    {
      name: '职位层级',
      description: `说明：设置公司的总职位等级:1~16级 (1-4级操作层、5-11级运营层、12-16级管理层)`,
      icon: 'icon-settings',
      path: 'PositionHierarchy'
    },
    {
      name: '职务类别',
      description: `说明：管理类(M) 、专业技术类(T)、市场营销类(S)、产品设计类 (D) 、职能管理类(P) 、操作类 (O)`,
      icon: 'icon-settings',
      path: 'JobSort'
    },
    {
      name: '职务级别',
      description: `说明：设置公司的总职位等级:1~16级 (1-4级操作层、5-11级运营层、12-16级管理层)`,
      icon: 'icon-settings',
      path: 'JobLevel'
    }
  ],
  [
    {
      name: '控编维度',
      description: `说明：管理类(M) 、专业技术类(T)、市场营销类(S)、产品设计类 (D) 、职能管理类(P) 、操作类 (O)`,
      icon: 'icon-settings',
      path: 'ManagementControl'
    }
  ]
]);

const goDetail = (item: str) => {
  router.push({
    name: item.path
  });
};
</script>

<style scoped lang="less">
.base-setting {
  &-warp {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }
}
.arco-divider-horizontal {
  margin-top: 0;
}

::v-deep .arco-tabs-nav::before {
  height: 0px !important; //tabs下的横向
}
</style>
